<template>
  <a-card :bordered="false" v-if="showHome">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <!-- <a-col :md="6" :sm="8">
            <a-form-item label="发行方名称">
              <a-input placeholder="请输入发行方名称" v-model="queryParam.issuerName"></a-input>
            </a-form-item>
          </a-col> -->
          <a-col :md="6" :sm="8">
            <a-form-item label="展会主题">
              <a-input placeholder="请输入展会主题" v-model="queryParam.worksNumber"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8" >
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!-- <a-button @click="handleAdd" v-if="userAuth2btn == '1'" type="primary">登记</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('发行方登记')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->
      <a-button type="primary" v-if="userAuth2btn == '3' || userAuth2btn == '4'" style="background: #00c39b;border: 1px solid #00c39b;" key="1" @click="handleApplyYes">通过</a-button>
      <a-button type="primary" v-if="userAuth2btn == '3' || userAuth2btn == '4'" style="background: #ff4767;border: 1px solid #ff4767;" @click="handleApplyNo">拒绝</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <template slot="oldSlot" slot-scope="text,record">
          <ul style="list-style: none;padding: 0;margin:0;">
            <li v-for="(val,index) in text.split(',')">
              <span>{{val}}</span>
              <a style="margin-right:10px;float: right;" type="primary" v-if="text" @click="oldNewCli(record.worksIds,index)"> 详情 </a>
            </li>
          </ul>
        </template>
        <template slot="newSlot" slot-scope="text,record">
          <ul style="list-style: none;padding: 0;margin:0;">
            <li v-for="(val,index) in text.split(',')" style="width:100%;height:30px;line-height: 30px;">
              <span>{{val}}</span>
              <span v-if="text!=''" style="color:#F5222D;cursor: pointer;float: right;" @click="oldNewCli(record.newWorksIds,index)"> 详情 </span>
            </li>
          </ul>
        </template>
        <span slot="action" slot-scope="text, record">
          <!-- <a @click="handleEdit(record)" v-if="!(userAuth2btn == '1' && record.status!=0)">编辑</a> -->
          <span style="color:red;cursor: pointer;" @click="detailCli(record)">详情</span>
          <!-- <a-divider type="vertical"  v-if="record.status == 0"/>
          <a-popconfirm v-if="record.status == 0" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm> -->
        </span>
        <span slot="status" slot-scope="text">
          <span v-if="text == 0">未开启</span>
          <span v-if="text == 1">进行中</span>
          <span v-if="text == 2">已结束</span>
        </span>
        <span slot="time" slot-scope="text, record">
          {{record.startTime+" 至 "+record.endTime}}
        </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <exhibition_issuer_register-modal ref="modalForm" @ok="modalFormOk"></exhibition_issuer_register-modal>
    <BlockProductStandardsAll v-if="showAll" :listData="listData" @returnUp="returnUp"></BlockProductStandardsAll>  
     
  </a-card>
  <div v-else style="background:#fff;padding:25px 30px;">
      <div style="border-bottom:1px solid #e8e8e8;padding-bottom:30px;">
        <div style="font-size:16px;font-weight:bold;">
          展会信息
          <img style="float: right;" @click="showHome = true" src="../../assets/close_icon.svg" alt="">
        </div>
        <div style="display:flex;justify-content: space-between;margin-top:15px;">
          <div style="width:33%;">
            <span>展会名称：</span>   
            <span>{{dataList.theme}}</span>
          </div>
          <div style="width:33%;">
            <span>举办地址：</span>   
            <span>{{dataList.address}}</span>
          </div>
          <div style="width:33%;">
            <span>举办时间：</span>   
            <span>{{dataList.startTime+" 至 "+dataList.endTime}}</span>
          </div>
        </div>
        <div style="display:flex;justify-content: space-between;margin-top:15px;">
          <div style="width:33%;">
            <span>展位号：</span>   
            <span>{{dataList.boothNum}}</span>
          </div>
          <div style="width:33%;">
            <span>审核状态：</span>   
            <span v-if="dataList.status==0">未审核</span>
            <span v-if="dataList.status==1">通过</span>
            <span v-if="dataList.status==2">拒绝</span>
            <span v-if="dataList.status==3">审核中</span>
          </div>
          <div style="width:33%;">
            <span>展会状态：</span>   
            <span v-if="dataList.meetingStatus==0">未开启</span>
            <span v-if="dataList.meetingStatus==1">进行中</span>
            <span v-if="dataList.meetingStatus==2">已结束</span>
          </div>
        </div>
      </div>
      <div>
        <div style="margin:40px 0 30px 0;font-weight:bold;font-size:16px;">展位详情</div>
        <a-table :columns="columnsBooth" :data-source="listBlockBooth" :pagination="false">
          <template slot="qrSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
            <div v-else @click="jumpProview(text)">
              <img :src="text" height="25px" alt="图片不存在" style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </div>
          </template>
          <template slot="hoteNumSlot" slot-scope="text,record">
            <span v-if="record.locationType == 0">{{record.hotelNumber}}</span>
            <span v-if="record.locationType == 1">{{record.lineNumber+record.columnNumber}}</span>
          </template>
          
          </span>
        </a-table>
        <div style="margin:40px 0 30px 0;font-weight:bold;font-size:16px;">组局详情</div>
        <a-table :columns="columnsPro" :data-source="listBlock">
          <span slot="timeSlot" slot-scope="text">
            <span v-if="text == 1">上午场</span>
            <span v-if="text == 2">下午场</span>
            <span v-if="text == 3">晚场</span>
          </span>
          <span slot="stateSlot" slot-scope="text">
            <span v-if="text == 1">未开启</span>
            <span v-if="text == 2">进行中</span>
            <span v-if="text == 3">已结束</span>
          </span>
          <span slot="dateSlot" slot-scope="text">
            <span>{{formatDateTime(text)}}</span>
          </span>
          <span slot="actionTime" slot-scope="text,record">
            <span @click="timeClick(record)" style="color:red;cursor: pointer;">编辑报名时间</span>
          </span>
        </a-table>
      </div>
      <JProviewImg v-if="showImg" @closeProview="showImg=false" :imgurl="proviewUrl"></JProviewImg>
      <a-modal
      title="编辑报名时间"
      :visible="visibleTime"
      @ok="handleOkTime"
      @cancel="visibleTime=false"
    >
      <p>
        <a-time-picker v-model='editDate' showTime format='HH:mm' />
      </p>
    </a-modal> 
  </div>
</template>

<script>
  import moment from 'moment';
  import Exhibition_issuer_registerModal from './modules/Exhibition_issuer_registerModal'
  import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { postAction,getAction } from '@/api/manage'
  import BlockProductStandardsAll from '../exhibition/modules/BlockProductStandardsAll'
  import JProviewImg from '@/components/jeecg/JProviewImg'

  export default {
    name: "Exhibition_issuer_registerList_admin",
    mixins:[JeecgListMixin],
    components: {
      Exhibition_issuer_registerModal,
      BlockProductStandardsAll,
      JProviewImg
    },
    data () {
      return {
        editDate:null,
        visibleTime:false,
        listBlockBooth:[],
        showImg:false,
        proviewUrl:"",
        columnsBooth:[
          {
            title: '展位号',
            align:"center",
            dataIndex: 'hotelNumber',
            scopedSlots: { customRender: 'hoteNumSlot' }
           },
           {
            title: '展位码',
            align:"center",
            dataIndex: 'captcha'
           },
           {
            title: '展位二维码',
            align:"center",
            dataIndex: 'tickets',
            scopedSlots: { customRender: 'qrSlot' }
           }
        ],
        listBlock:[],
        columnsPro:[
        {
            title: '商品名称',
            align:"center",
            dataIndex: 'name'
           },
           {
            title: '房间/展位',
            align:"center",
            dataIndex: 'field'
           },
           {
            title: '场次日期',
            align:"center",
            dataIndex: 'sceneDate',
            scopedSlots: { customRender: 'dateSlot' }
           },           
           {
            title: '场次',
            align:"center",
            dataIndex: 'timeSlot',
            scopedSlots: { customRender: 'timeSlot' },
           },
           {
            title: '报名时间',
            align:"center",
            dataIndex: 'registrationTime',
           },
           {
            title: '发车时间',
            align:"center",
            dataIndex: 'departureTime'
           },
           {
            title: '组局状态',
            align:"center",
            dataIndex: 'state',
            scopedSlots: { customRender: 'stateSlot' },
           },
           {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'actionTime' },
           },
        ],
        showHome:true,
        description: '发行方登记管理页面',
        showAll:false,
        listData:{},
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
           },
		      {
            title: '发行方名称',
            align:"center",
            dataIndex: 'issuerName'
           },
		      {
            title: '展会主题',
            align:"center",
            dataIndex: 'theme'
           },
           {
            title: '展会状态',
            align:"center",
            dataIndex: 'meetingStatus',
            scopedSlots: { customRender: 'status' } 
           },
           {
            title: '举办地址',
            align:"center",
            dataIndex: 'address'
           },
           {
            title: '在售作品',
            align:"center",
            dataIndex: 'worksIdsName',
            scopedSlots: { customRender: 'oldSlot' }
           },
           {
            title: '预售作品',
            align:"center",
            dataIndex: 'newWorksIdsName',
            scopedSlots: { customRender: 'newSlot' }
           },
           {
            title: '举办时间',
            align:"center",
            dataIndex: 'startTime',
            scopedSlots: { customRender: 'time' } 
          },
		      {
            title: '展位码',
            align:"center",
            dataIndex: 'boothNum'
          },
		      {
            title: '审核状态',
            align:"center",
            dataIndex: 'status',
            customRender: text => {
              return filterMultiDictText(this.dictOptions['applyStatus'], text + '')
            }            
           },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' },
          }
        ],
        userAuth2btn:"1",
        url: {
            list: "/exhibition/exhibition_issuer_register/list",
            delete: "/exhibition/exhibition_issuer_register/delete",
            deleteBatch: "/exhibition/exhibition_issuer_register/deleteBatch",
            exportXlsUrl: "exhibition/exhibition_issuer_register/exportXls",
            importExcelUrl: "exhibition/exhibition_issuer_register/importExcel",
            apply:"/exhibition/exhibition_issuer_register/audit"
          },
        dictOptions: {
          applyStatus: []
        },
        dataList:{},
        dataNew:[],
        dataOld:[],
        exhibitionMeetingId:"",
        groupId:""
    }
  },
  mounted(){
    getAction("/block/blockManufacturerInfo/userAuth2btn")
        .then(res => {
          if (res.success) {
            this.userAuth2btn = res.result.status;
          } else {
            that.$message.warning(res.message)
          }
        })
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
  methods: {
    timeClick(record){
      this.visibleTime = true;
      this.groupId = record.id;
    },
    handleOkTime(){
      var time = moment(this.editDate).format('HH:mm');
      var exData={
        registrationTime: time,
        groupId: this.groupId
      };
      postAction("https://blockinsight.com.cn/blackExplorationExhibition/third/updDepartureTime?registrationTime="+time+"&groupId="+this.groupId,exData)
      .then(res => {
        this.visibleTime = false;
        getAction("https://blockinsight.com.cn/blackExplorationExhibition/third/dramaBureauList?currentPage=1&pageSize=100&exhibitionId="+this.exhibitionMeetingId)
        .then(res => {
          this.listBlock = res.data.data;
          })
        })      
    },
    jumpProview(val){
      this.showImg = true;
      this.proviewUrl = val;
    },
    formatDateTime (date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')
    },
    detailCli(data){
      this.dataList = data;
      this.exhibitionMeetingId = data.exhibitionMeetingId;
      var exData={
        exhibition_meeting_id:data.exhibitionMeetingId,
        issuer_id:data.issuerId
      };
      getAction("/exhibition/exhibition_tickets/queryAllTickets",exData)
        .then(res => {
          this.listBlockBooth = res.result;
        })
      getAction("https://blockinsight.com.cn/blackExplorationExhibition/third/dramaBureauList?currentPage=1&pageSize=100&exhibitionId="+data.exhibitionMeetingId)
        .then(res => {
          this.listBlock = res.data.data;
        })
      this.showHome = false;
      this.dataNew = [];
      this.dataOld = [];
      var newLi = data.newWorksIdsName.split(',');
      var oldLi = data.worksIdsName.split(',');
      for(var i=0;i<newLi.length;i++){
        this.dataNew.push({name:newLi[i]})
      }
      for(var i=0;i<oldLi.length;i++){
        this.dataOld.push({name:oldLi[i]})
      }
    },
    oldNewCli(list,index){     
        var pams = {
          id:list.split(',')[index]
        }
      getAction("/exhibition/exhibition_product_standards_new/list",pams)
        .then(res => {
          if (res.success) {
            this.showAll = true;
            this.listData = res.result.records[0];
          } else {
            that.$message.warning(res.message)
          }
        })
    },
    initDictConfig() {
      initDictOptions('apply_status').then(res => {
        if (res.success) {
          this.$set(this.dictOptions, 'applyStatus', res.result)
        }
      })
    },
    detailsCli(record){
      this.showAll=true;
      this.listData = record;
    },
    returnUp(data){
      this.showAll = data;
    },
    handleApplyYes(){
      this.applyMethod(this, 1)
    },
    handleApplyNo(){
      this.applyMethod(this, 2)
    },
    applyMethod(that, status) {
      var ids = '';
      if (that.selectedRowKeys.length <= 0) {
        that.$message.warning('请选择一条记录！')
        return
      }
      if (that.selectedRowKeys.length > 1) {
        that.$message.warning('只能选择一条记录！')
        return
      }
      for (var a = 0; a < that.selectedRowKeys.length; a++) {
        if(a == 0){
          ids += that.selectedRowKeys[a];
        }else{
          ids += ',' + that.selectedRowKeys[a];
        }
      }
      postAction(that.url.apply, { "id": ids, "status": status })
        .then(res => {
          if (res.success) {
            that.$message.success(res.message)
            that.loadData()
            that.onClearSelected()
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.loading = false
        })
    },
  }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>